<template>
	<view class="add-feedback">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode="widthFix"></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">新建意见反馈</view>
		</view>
		<div class="add-form">
			<u-form :model="formData" ref="uForm">
				<div class="form-item">
					<p>意见类型</p>
					<u-form-item prop="formData.type" @click="show = true">
						<picker @change="bindPickerChange" :value="currentIndex" :range="typeList">
							<view class="choose-type">
								{{ chooseType }}
							</view>
						</picker>
					</u-form-item>
				</div>
				<div class="form-item1">
					<p>反馈内容</p>
					<u-form-item prop="formData.content">
						<u--textarea v-model="formData.content" placeholder="请输入内容"></u--textarea>
					</u-form-item>
				</div>
				<div class="form-item2">
					<p>请提供相关问题的截图或图片 ({{ formData.images.length }}/3)</p>
					<div class="uploadimg">
						<div class="uploadpic" @click="chooseImage">
							<image v-for="(item, index) in formData.images" :src="item" mode="widthFix"></image>
							<u-icon v-if="formData.images.length < 3" name="camera" size="26px"
								color="rgba(0,0,0,0.6)"></u-icon>
						</div>
					</div>
				</div>
				<div class="form-item">
					<p>联系号码</p>
					<u-form-item prop="formData.mobile" class="liuyan">
						<u--input v-model="formData.mobile" border="none" type="number" placeholder="请输入联系方式"
							input-align="right">
						</u--input>
					</u-form-item>
				</div>
			</u-form>
			<div class="submit-btn" @click="submitForm">提交</div>
		</div>
	</view>
</template>

<script>
import { getOptionList, addFeedback } from '@/api/mine.js'
export default {
	data() {
		return {
			formData: {
				type: '',
				content: '',
				images: [],
				mobile: ''
			},
			show: false,
			currentIndex: 0,
			typeList: [],
			chooseType: '请选择'
		}
	},
	onReady() {
		this.getOptionList();
	},
	methods: {
		bindPickerChange: function (e) {
			console.log('picker发送选择改变，携带值为', e.detail);
			this.currentIndex = e.detail.value;
			this.chooseType = this.typeList[this.currentIndex];
			this.formData.type = String(Number(e.detail.value) + 1);
		},
		async getOptionList() {
			const res = await getOptionList();
			if (res.response.statusCode === 200) {
				const valuesArray = Object.values(res.data.data);
				// console.log(valuesArray,'res.data.data');
				this.typeList = valuesArray;
			}
		},
		chooseImage() {
			const token = uni.getStorageSync('userInfo').token;
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						data: {
							file: chooseImageRes.tempFilePaths[0]
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'token': token
						},
						success: (res) => {
							if (res.statusCode === 200) {
								try {
									const obj = JSON.parse(res.data);
									this.formData.images.push(obj.data.fullurl);
								} catch (e) {
									console.error('解析失败:', e);
								}
							}
						}
					});
				}
			});
		},
		async submitForm() {
			const res = await addFeedback(this.formData);
			// console.log(res, 'rreeess');
			if (res.response.statusCode === 200) {
				uni.showToast({
					title: '提交成功！',
					icon: 'success'
				});
				uni.navigateTo({
					url: '/pages/mine/feedback'
				});
			} else {
				uni.showToast({
					title: '提交失败！',
					icon: 'fail'
				});
			}
		},
		goBack() {
			uni.navigateBack({ delta: 1 });
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px;
	/* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}

.nav-back {
	flex: 0 0 auto;
	cursor: pointer;

	image {
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}

.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}

.form-item {
	width: 82%;
	padding: 10px 20px;
	margin: 15px auto;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-item1 {
	padding: 20px 0;

	p {
		padding-left: 30px;
		font-weight: 500;
		font-size: 15px;
		color: #4F5963;
	}
}

::v-deep .u-textarea {
	width: 86%;
	margin: 0 auto;
	border: none;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
	border-radius: 8px !important;
}

.form-item2 {
	padding: 20px 0;

	p {
		padding-left: 30px;
		font-weight: 500;
		font-size: 15px;
		color: #4F5963;
	}

	.uploadimg {
		width: 82%;
		padding: 20px;
		margin: 15px auto;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
		border-radius: 8px;

		.uploadpic {
			display: flex;
			align-items: center;

			::v-deep .u-icon--right {
				flex-direction: column;
				width: 72px;
				height: 62px;
				line-height: 62px;
				border-radius: 8px;
				border: 1px dashed #DCDCDC;
				text-align: center;
			}

			::v-deep .u-icon__icon {
				margin-top: 15px;
			}

			image {
				width: 72px;
				height: 72px;
				margin-right: 5px;
			}
		}
	}
}

.submit-btn {
	width: 90%;
	height: 44px;
	background: #0095F8;
	box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
	border-radius: 22px;
	font-weight: 500;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 44px;
	text-align: center;
	position: fixed;
	bottom: 50px;
	left: 5%;
}
</style>
